<template>
	<div class='header-fixed-top'>
		<transition-group v-if='!pictureList ? false : true' enter-active-class='animated fadeIn'>
			<router-link
				tag='div'
				v-for='item of pictureList' 
				:key='item._id'
				class="picture-list" 
				:class="{picture_list_active: picAct == item._id}"
				@touchstart.native='pictureTouchstart(item._id)'
				@touchend.native='pictureTouchend()'
				:to="'/PictureDetail/' + item._id"
			>
				<div class="picture-list-top">
					<p class="picture-list-top-title">
						{{item.p_title}}
					</p>
				</div>
				<div class="picture-list-bottom">
					<div class="picture-list-bottom-l">
						<img 
							class="picture-img" 
							:src="item.p_small_img[0].simg_url" 
						/>
					</div>
					<div class="picture-list-bottom-c">
						<img 
							class="picture-img" 
							:src="item.p_small_img[1].simg_url" 
						/>
					</div>
					<div class="picture-list-bottom-r">
						<img 
							class="picture-img" 
							:src="item.p_small_img[2].simg_url" 
						/>
					</div>
					
					<div class="more-img" v-show='item.p_img.length > 3'>
						{{item.p_img.length}}图
					</div>
					
				</div>
				<div class="picture-list-info">
					<span class="info-time">
						{{item.p_time}}
					</span>
					<span class="info-user">
						{{item.p_user}}
					</span>
				</div>	
			</router-link>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name: 'picture-list',
		props: {
			pictureList: Array
		},
		data () {
			return {
				picAct: ''
			}
		},
		methods: {
			pictureTouchstart (xb) {
				this.picAct = xb
			},
			pictureTouchend () {
				this.picAct = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
	$Priture_ImgColor = #F6F6F6
	.picture-list
		padding:24px 30px 30px 30px
		background:#fff
		border-bottom:1px #F0F0F0 solid
		.picture-list-top-title
			display: -webkit-box
			-webkit-line-clamp: 2
			overflow:hidden
			text-overflow:ellipsis
			-webkit-box-orient: vertical
			font-size:32px
			line-height:46px
		.picture-list-bottom
			position:relative
			margin-top:20px
			display:flex
			flex-direction:row
			.picture-list-bottom-l
				width:32.9%
				height:172px
				overflow:hidden
				margin-right:2px
				background:$Priture_ImgColor
			.picture-list-bottom-c
				width:32.9%
				height:172px
				overflow:hidden
				margin-right:2px
				background:$Priture_ImgColor
			.picture-list-bottom-r
				width:32.9%
				height:172px
				overflow:hidden
				background:$Priture_ImgColor
			.more-img
				padding:6px 8px
				background:rgba(0,0,0,.6)
				position:absolute
				right:8px
				bottom:4px
				color:#fff
				text-align:center
			.picture-img
				width:100%
		.picture-list-info
			padding:4px 0
			margin-top:20px
			overflow:hidden
			font-size:24px
			color:#b5b5b5
			.info-time
				margin-right:30px
	.picture_list_active
		background-color:#F1F1F1			
</style>
